//点击新建流程弹出的页面
<template>
  <div>
    <!-- and or not -->
    <el-dialog
      title="流程设计"
      :visible="dialogVisible"
      fullscreen
      append-to-body
      @close="cancel"
    >
      <div class="fd-nav-content">
        <section class="dingflow-design">
          <div class="zoom">
            <div
              :class="'zoom-out' + (nowVal == 50 ? ' disabled' : '')"
              @click="zoomSize(1)"
            ></div>
            <span>{{ nowVal }}%</span>
            <div
              :class="'zoom-in' + (nowVal == 300 ? ' disabled' : '')"
              @click="zoomSize(2)"
            >

            </div>
          </div>
          <div
            class="box-scale"
            id="box-scale"
            :style="
              'transform: scale(' +
              nowVal / 100 +
              '); transform-origin: 50% 0px 0px;'
            "
          >
            <nodeWrap
              :nodeConfig.sync="nodeConfig"
              :flowPermission.sync="flowPermission"
            ></nodeWrap>
            <div class="end-node">
              <div class="end-node-circle"></div>
              <div class="end-node-text">流程结束</div>
            </div>
          </div>
        </section>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="saveSet()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pubsub from "pubsub-js";

import Main from "@/utils/computed.js";
import { mapMutations } from "vuex";
var fn = new Main();
export default {
  name: "technologicalprocess",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {
      htmlheight: 0,
      dialogVisible: false,
      tipList: [],
      tipVisible: false,
      nowVal: 100,
      processConfig: {},
      nodeConfig: {
        nodeName: "发起人", type: 0, priorityLevel: "", settype: "", selectMode: "", selectRange: "", directorLevel: "",
        examineMode: "", noHanderAction: "", examineEndDirectorLevel: "", ccSelfSelectFlag: "", conditionList: [],
        nodeUserList: [],
        childNode: {
          nodeName: "审核人", error: false, type: 1, settype: 2, selectMode: 0, selectRange: 0, directorLevel: 1,
          examineMode: 1,noHanderAction: 2, examineEndDirectorLevel: 0,
          childNode:    {
            nodeName: "路由", type: 4, priorityLevel: 1, settype: 1, selectMode: 0, selectRange: 0, directorLevel: 1,
            examineMode: 1, noHanderAction: 2, examineEndDirectorLevel: 1, ccSelfSelectFlag: 1, conditionList: [],
            nodeUserList: [],
            childNode: {
              nodeName: "知会人",
              type: 2,
              ccSelfSelectFlag: 1,
              childNode: null,
              nodeUserList: [],
              error: false,
            },
            conditionNodes: [
              {
                nodeName: "条件1",
                type: 3,
                priorityLevel: 1,
                settype: 1,
                selectMode: 0,
                selectRange: 0,
                directorLevel: 1,
                examineMode: 1,
                noHanderAction: 2,
                examineEndDirectorLevel: 1,
                ccSelfSelectFlag: 1,
                conditionList: [
                  {
                    columnId: 0,
                    type: 1,
                    conditionEn: "",
                    conditionCn: "",
                    optType: "",
                    zdy1: "",
                    zdy2: "",
                    opt1: "",
                    opt2: "",
                    columnDbname: "",
                    columnType: "",
                    showType: "",
                    showName: "",
                    fixedDownBoxValue: "",
                  },
                ],
                nodeUserList: [],
                childNode: {
                  childNode: null,
                  conditionNodes: [],
                  error: false,
                },
                conditionNodes: [],
                error: false,
              },
              {
                nodeName: "条件2",
                type: 3,
                priorityLevel: 2,
                settype: 1,
                selectMode: 0,
                selectRange: 0,
                directorLevel: 1,
                examineMode: 1,
                noHanderAction: 2,
                examineEndDirectorLevel: 1,
                ccSelfSelectFlag: 1,
                conditionList: [],
                nodeUserList: [],
                childNode: null,
                conditionNodes: [],
                error: false,
              },
            ],
          },
          nodeUserList: [],
        },
        conditionNodes: [],
      },
      workFlowDef: {},
      flowPermission: ["nk", "qwe"],
      directorMaxLevel: 4,
    };
  },
  watch: {
    "$store.state.docHeight": function (e) {
      this.htmlheight = e;
    },
  },
  mounted() {
    const _this = this;
    _this.htmlheight = _this.$store.state.docHeight;
    this.pubId = pubsub.subscribe("openTank", (msgName, data) => {
      console.log("消息名称", msgName);
      console.log("数据", data);
      this.dialogVisible = true;
    });
  },
  methods: {
    handleClick(row) {
      this.drawer = true;
    },
    toReturn() {
      //window.location.href = ""
    },
    reErr({ childNode }) {
      if (childNode) {
        let { type, error, nodeName, conditionNodes } = childNode;
        if (type == 1 || type == 2) {
          if (error) {
            this.tipList.push({
              name: nodeName,
              type: ["", "审核人", "知会人"][type],
            });
          }
          this.reErr(childNode);
        } else if (type == 3) {
          this.reErr(childNode);
        } else if (type == 4) {
          this.reErr(childNode);
          for (var i = 0; i < conditionNodes.length; i++) {
            if (conditionNodes[i].error) {
              this.tipList.push({
                name: conditionNodes[i].nodeName,
                type: "条件",
              });
            }F
            this.reErr(conditionNodes[i]);
          }
        }
      } else {
        childNode = null;
      }
    },
    async saveSet() {
      this.setIsTried(true);
      this.tipList = [];
      this.reErr(this.nodeConfig);
      if (this.tipList.length != 0) {
        this.tipVisible = true;
        return;
      }
      this.processConfig.flowPermission = this.flowPermission;
      console.log("processConfig",JSON.stringify(this.processConfig));

    },
    zoomSize(type) {
      if (type == 1) {
        if (this.nowVal == 50) return;
        this.nowVal -= 10;
      } else {
        if (this.nowVal == 300) return;
        this.nowVal += 10;
      }
    },
    confirm() {},
    cancel() {
      this.$emit("update:dialogVisible", false);
    },
  },
  created() {

  },
};
</script>
<style>
@import "../../css/workflow.css";
</style>
<style scoped lang="scss">
.technologicalprocess {
  margin-top: 50px;
  display: flex;
  align-items: center;
  /* align-items: unset; */
}

.technologicalprocess > .line {
  flex-shrink: 0;
}

.technologicalprocess .item {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #eee;
  background-color: #eee;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.technologicalprocess .line .Computed {
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
}

.technologicalprocess .item.end {
  background-color: #fa0404;
  color: #fff;
}

.technologicalprocess .line {
  height: 2px;
  width: 100px;
  background-color: #ccc;
  position: relative;
  display: flex;
  flex-direction: row-reverse;
}

.technologicalprocess .line .ball {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
  margin-top: -4px;
}

.technologicalprocess .bigItem {
  border: 2px solid #ccc;
}

.technologicalprocess .bigItem > .item {
  display: flex;
  align-items: center;
  width: auto;
  height: auto;
  background-color: transparent;
  border: 0;
  margin: 50px auto;
}

.technologicalprocess .bigItem > .item .line {
  min-width: 100px;
  width: 100%;
}

.technologicalprocess .bigItem > .item .item {
  flex-shrink: 0;
}
/deep/ .el-dialog__body {
  height: 100% !important;
  overflow: auto !important;
}
</style>
